@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap');


/* =====================================================
   ROOT VARIABLES
===================================================== */

:root {

    --bg-primary: #070b12;
    --bg-secondary: #0d1420;

    --surface: rgba(255,255,255,0.08);
    --surface-light: rgba(255,255,255,0.12);

    --border: rgba(255,255,255,0.14);

    --white: #ffffff;
    --text: #dce7f5;
    --muted: #91a1b7;

    --blue: #0099ff;
    --sky: #63d7ff;

    --blue-glow:
    rgba(0,153,255,0.45);


    --gradient:
    linear-gradient(
        135deg,
        #0099ff,
        #63d7ff
    );


    --glass:
    backdrop-filter: blur(25px);


    --radius-lg: 32px;
    --radius-md: 20px;


    --transition:
    cubic-bezier(.22,1,.36,1);

}





/* =====================================================
   RESET
===================================================== */


* {

    margin:0;
    padding:0;

    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    background:
    var(--bg-primary);

    color:var(--white);

    font-family:
    Inter,
    sans-serif;

    overflow-x:hidden;

}


img {

    max-width:100%;
    display:block;

}


a {

    text-decoration:none;

    color:inherit;

}


ul {

    list-style:none;

}





/* =====================================================
   GLOBAL BACKGROUND
===================================================== */


.bg-wrapper {

    position:fixed;

    inset:0;

    z-index:-10;

    overflow:hidden;

    pointer-events:none;

}





/* animated grid */


.grid-layer {


    position:absolute;

    inset:-50%;


    background-image:

    linear-gradient(
    rgba(255,255,255,.04) 1px,
    transparent 1px
    ),

    linear-gradient(
    90deg,
    rgba(255,255,255,.04) 1px,
    transparent 1px
    );


    background-size:
    80px 80px;


    transform:
    perspective(900px)
    rotateX(65deg)
    translateY(300px);


    opacity:.25;


    animation:
    gridMove 25s linear infinite;

}




@keyframes gridMove {


    from {

        transform:
        perspective(900px)
        rotateX(65deg)
        translateY(300px);

    }


    to {

        transform:
        perspective(900px)
        rotateX(65deg)
        translateY(0);

    }

}







/* noise texture */


.noise-layer {


    position:absolute;

    inset:0;


    opacity:.06;


    background-image:

    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");


}







/* aurora lighting */


.aurora {


    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;


    filter:
    blur(120px);


    opacity:.35;


}
.aurora-1 {
    background: #38bdf8; /* Light Blue */
    top: -200px;
    left: -200px;
    opacity: 0.2; /* Lowered slightly for the dark theme */
}

.aurora-2 {
    background: #64748b; /* Slate Grey */
    right: -200px;
    bottom: -200px;
    opacity: 0.15;
}

.aurora-3 {
    background: #0ea5e9; /* Mid Blue */
    top: 40%;
    left: 40%;
    opacity: 0.1;
}



@keyframes floatAurora {


    from {

        transform:
        translate(0,0)
        scale(1);

    }


    to {

        transform:
        translate(150px,-80px)
        scale(1.3);

    }

}







/* =====================================================
   CUSTOM CURSOR
===================================================== */


#cursor {


    position:fixed;


    width:14px;

    height:14px;


    background:
    var(--sky);


    border-radius:50%;


    pointer-events:none;


    z-index:9999;


    mix-blend-mode:screen;


    transition:
    transform .2s var(--transition);


}



#cursorBlur {


    position:fixed;


    width:120px;

    height:120px;


    border-radius:50%;


    background:
    var(--blue-glow);


    filter:
    blur(40px);


    pointer-events:none;


    z-index:9998;


}







/* =====================================================
   TOP LOGO BAR & LOGO VISIBILITY
===================================================== */
.top-logo-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 160px; /* Adjust to match your logo height */
    display: flex;
    align-items: center;
    z-index: 100;
    background: transparent; /* Ensures the site background flows through */
}

.logo-holder {
    padding: 0 40px;
    position: relative;
    display: flex;
    align-items: center;
}

/* Localized "Light" behind logo to solve visibility without a background box */
.logo-holder::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px; /* Smaller, focused glow */
    height: 160px;
    /* Soft white glow to help the logo pop against the dark background */
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
    filter: blur(25px);
    z-index: -1;
}

#site-logo {
    height: 80px;
    width: auto;
    display: block;
    position: relative;
    z-index: 2;
    /* Updated shadow from Blue to a subtle White Glow */
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.15)) brightness(1.1);
}

/* THE LINES: Changed from old blue to soft silver/white to match the grey theme */
.line-segment {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sky));
    opacity: 0.6;
}

.line-left { width: 40px; flex-shrink: 0; }
.line-right { flex-grow: 1; background: linear-gradient(90deg, var(--sky), transparent); }

/* =====================================================
   DOCKING NAVBAR (No Button)
===================================================== */
#main-nav-container {
    position: fixed;
    top: 110px; /* Initial floating position */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    transition: all 0.5s var(--transition);
    width: auto;
}

/* When Scrolled: Dock to top and expand slightly */
#main-nav-container.docked {
    top: 0;
    padding-top: 10px;
}

.navbar-pill {
    background: rgba(10, 11, 13, 0.7); /* Deep Black-Grey */
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    padding: 12px 40px;
    display: flex;
    align-items: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
    transition: all 0.4s ease;
}

#main-nav-container.docked .navbar-pill {
    background: rgba(10, 11, 13, 0.95); /* Solid Black when docked */
    border-radius: 0 0 30px 30px;
    border-top: none;
}
.nav-menu {
    display: flex;
    gap: 35px;
}

.nav-menu a {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: 0.3s;
}

.nav-menu a:hover {
    color: var(--sky);
}

/* =====================================================
   FLOATING SLIM PILL NAVBAR
===================================================== */
header {
    position: fixed;
    top: 100px; /* Sits below the logo lines */
    left: 50%;
    transform: translateX(-50%);
    width: auto; /* Shrinks to content */
    z-index: 1000;
    transition: transform 0.6s var(--transition), opacity 0.4s;
}

/* Hidden State for Scrolling */
.nav-hidden {
    transform: translateX(-50%) translateY(-180px) !important;
    opacity: 0;
}

.navbar-pill {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(25px);
    border: 1px solid var(--border);
    border-radius: 100px; /* Creates the pill shape */
    padding: 10px 30px;
    display: flex;
    align-items: center;
    gap: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.nav-menu {
    display: flex;
    gap: 30px;
    list-style: none;
}

.nav-menu a {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}

.nav-menu a:hover {
    color: white;
    text-shadow: 0 0 8px var(--sky);
}

.btn-pill-cta {
    background: var(--blue);
    color: white;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.4s;
    white-space: nowrap;
}

.btn-pill-cta:hover {
    background: var(--sky);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px var(--blue-glow);
}

/* =====================================================
   BUTTONS
===================================================== */



.btn-primary,
.btn-outline,
.btn-glass {


    display:inline-flex;


    align-items:center;

    justify-content:center;


    padding:
    15px 32px;


    border-radius:
    100px;


    font-weight:600;


    font-size:14px;


    position:relative;


    overflow:hidden;


    transition:
    .5s var(--transition);


}




.btn-primary {


    background:
    var(--gradient);


    color:white;


    box-shadow:
    0 0 40px var(--blue-glow);


}




.btn-primary:hover {


    transform:
    translateY(-5px)
    scale(1.03);


    box-shadow:
    0 0 70px var(--blue-glow);


}





.btn-outline {


    border:
    1px solid var(--border);


    background:
    rgba(255,255,255,.05);


    backdrop-filter:
    blur(20px);


}





.btn-outline:hover,
.btn-glass:hover {


    background:
    rgba(255,255,255,.12);


    transform:
    translateY(-5px);


}



.btn-glass {


    border:
    1px solid var(--border);


    background:
    rgba(255,255,255,.06);


    color:white;


}
/* =====================================================
   HERO SECTION
===================================================== */


#hero {


    min-height:100vh;


    width:100%;


    position:relative;


    display:flex;


    align-items:center;


    justify-content:space-between;


    padding:
    140px 8% 80px;


    overflow:hidden;


    perspective:1200px;


}





.hero-content {


    width:55%;


    position:relative;


    z-index:5;


}




.hero-tag {


    display:inline-flex;


    align-items:center;


    gap:12px;


    padding:
    10px 20px;


    border-radius:100px;


    border:
    1px solid var(--border);


    background:
    rgba(255,255,255,.05);


    backdrop-filter:
    blur(20px);


    color:
    var(--sky);


    font-size:14px;


    margin-bottom:35px;


    animation:
    fadeUp 1s forwards;


}





.hero-tag::before {


    content:"";


    width:8px;


    height:8px;


    border-radius:50%;


    background:
    var(--sky);


    box-shadow:
    0 0 20px var(--sky);


}







.hero-content h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(65px, 8vw, 120px);
    line-height: .9;
    letter-spacing: -5px;
    font-weight: 700;
    background: linear-gradient(
        180deg,
        #ffffff 0%,    /* White top */
        #cbd5e1 45%,   /* Technical Silver-Grey middle */
        #38bdf8 100%   /* Vibrant Light Blue bottom */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: heroTitle 1.2s var(--transition);
}





.hero-content p {


    margin-top:35px;


    max-width:620px;


    color:
    var(--muted);


    font-size:18px;


    line-height:1.8;


    animation:
    fadeUp 1.4s var(--transition);


}







.hero-buttons {


    margin-top:45px;


    display:flex;


    gap:20px;


    animation:
    fadeUp 1.6s var(--transition);


}







/* =====================================================
   HERO 3D STAGE
===================================================== */



.hero-light {


    position:absolute;


    width:800px;


    height:800px;


    right:0;


    top:10%;


    background:
    radial-gradient(

    circle,

    rgba(0,153,255,.3),

    transparent 65%

    );


    filter:
    blur(50px);


}





.hero-blueprint {


    position:absolute;


    right:5%;


    top:20%;


    width:600px;


    opacity:.18;


    transform:
    translateZ(-100px);


    animation:
    blueprintFloat 10s infinite alternate;


}





.hero-blueprint img {


    width:100%;


    filter:


    drop-shadow(
    0 0 40px #0099ff
    );


}





.hero-aircraft {


    position:absolute;


    right:8%;


    top:40%;


    width:620px;


    z-index:3;


    transform-style:preserve-3d;


    animation:


    aircraftFloat 8s ease-in-out infinite;


}






.hero-aircraft img {


    width:100%;


    filter:


    drop-shadow(

    0 30px 80px rgba(0,153,255,.45)

    );


}





@keyframes aircraftFloat {


    0% {


        transform:

        translateY(0)

        rotateY(-8deg)

        rotateX(3deg);


    }


    50% {


        transform:

        translateY(-30px)

        rotateY(8deg)

        rotateX(-3deg);


    }


    100% {


        transform:

        translateY(0)

        rotateY(-8deg)

        rotateX(3deg);


    }


}







@keyframes blueprintFloat {


    from {


        transform:

        translateY(0)

        rotateZ(-5deg);


    }


    to {


        transform:

        translateY(-40px)

        rotateZ(5deg);


    }


}







/* =====================================================
   ORBIT RINGS
===================================================== */


.hero-rings {


    position:absolute;


    right:8%;


    top:22%;


    width:650px;


    height:650px;


    transform-style:preserve-3d;


}




.ring {


    position:absolute;


    inset:0;


    border-radius:50%;


    border:

    1px solid rgba(99,215,255,.2);


}





.r1 {


    transform:

    rotateX(70deg);


    animation:

    rotateRing 18s linear infinite;


}




.r2 {


    transform:

    rotateY(70deg);


    animation:

    rotateRing 25s linear infinite reverse;


}



.r3 {


    transform:

    rotateX(40deg)

    rotateY(40deg);


    animation:

    rotateRing 30s linear infinite;


}





@keyframes rotateRing {


    from {


        transform:
        rotateZ(0deg);


    }


    to {


        transform:
        rotateZ(360deg);


    }

}







/* =====================================================
   HERO STATS
===================================================== */



.hero-stats {


    margin-top:70px;


    display:flex;


    gap:25px;


}





.hero-stats div {


    min-width:120px;


    padding:
    18px;


    border-radius:
    20px;


    background:
    rgba(255,255,255,.05);


    border:
    1px solid var(--border);


    backdrop-filter:
    blur(20px);


}





.hero-stats h2 {


    font-family:
    Space Grotesk;


    font-size:35px;


}





.hero-stats p {


    margin:5px 0 0;


    font-size:13px;


    color:
    var(--muted);


}






/* =====================================================
   SCROLL INDICATOR
===================================================== */


.scroll-indicator {


    position:absolute;


    bottom:40px;


    left:50%;


    transform:
    translateX(-50%);


    color:
    var(--muted);


    font-size:12px;


    text-transform:uppercase;


    letter-spacing:4px;


}





.scroll-indicator span {


    display:block;


    width:2px;


    height:60px;


    margin:auto;


    margin-bottom:15px;


    background:
    linear-gradient(

    transparent,

    var(--sky)

    );


    animation:

    scrollLine 2s infinite;


}



@keyframes scrollLine {


    0% {


        transform:
        scaleY(0);


        transform-origin:top;


    }


    50% {


        transform:
        scaleY(1);


    }


    100% {


        transform:
        scaleY(0);


        transform-origin:bottom;


    }

}






/* =====================================================
   HERO ANIMATIONS
===================================================== */


@keyframes fadeUp {


    from {


        opacity:0;


        transform:

        translateY(40px);


    }


    to {


        opacity:1;


        transform:

        translateY(0);


    }

}





@keyframes heroTitle {


    from {


        opacity:0;


        transform:

        translateY(80px)

        scale(.95);


        filter:
        blur(15px);


    }


    to {


        opacity:1;


        transform:

        translateY(0)

        scale(1);


        filter:
        blur(0);


    }

}
/* =====================================================
   GLOBAL SECTION STYLING
===================================================== */


section {

    position:relative;

    padding:
    140px 8%;

    overflow:hidden;

}





.section-header {


    max-width:850px;


    margin-bottom:80px;


}





.section-header span {


    display:inline-block;


    color:
    var(--sky);


    font-size:13px;


    letter-spacing:5px;


    text-transform:uppercase;


    margin-bottom:25px;


}





.section-header h2 {


    font-family:
    Space Grotesk,
    sans-serif;


    font-size:
    clamp(45px,5vw,75px);


    line-height:1;


    letter-spacing:-3px;


    background:


    linear-gradient(

    180deg,

    white,

    #8fcfff

    );


    -webkit-background-clip:text;


    -webkit-text-fill-color:transparent;


}





.section-header p {


    margin-top:30px;


    color:
    var(--muted);


    font-size:18px;


    line-height:1.8;


    max-width:650px;


}







/* =====================================================
   ABOUT SECTION
===================================================== */


#about {


    padding-top:180px;


}




.about-grid {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}





.glass-card {


    position:relative;


    padding:45px;


    min-height:360px;


    border-radius:
    var(--radius-lg);


    background:


    linear-gradient(

    145deg,

    rgba(255,255,255,.12),

    rgba(255,255,255,.03)

    );


    border:

    1px solid var(--border);


    backdrop-filter:

    blur(30px);


    overflow:hidden;


    transition:

    .6s var(--transition);


    transform-style:

    preserve-3d;


}





.glass-card::before {


    content:"";


    position:absolute;


    width:200px;


    height:200px;


    top:-80px;


    right:-80px;


    background:

    var(--blue);


    filter:

    blur(90px);


    opacity:.2;


}




.glass-card:hover {
    transform: translateY(-15px) rotateX(5deg) rotateY(-5deg);
    border-color: rgba(56, 189, 248, 0.4); /* Light Blue Border */
    box-shadow: 0 20px 40px rgba(56, 189, 248, 0.1);
}





.card-number {


    font-family:

    Space Grotesk;


    font-size:60px;


    color:

    rgba(255,255,255,.08);


    position:absolute;


    top:25px;


    right:35px;


}





.glass-card h3 {


    position:relative;


    z-index:2;


    font-size:28px;


    font-family:

    Space Grotesk;


    margin-top:80px;


}





.glass-card p {


    position:relative;


    z-index:2;


    margin-top:20px;


    color:

    var(--muted);


    line-height:1.8;


}






/* =====================================================
   EXPERIENCE SECTION
===================================================== */


#experience {


    padding-top:100px;


}





.experience-grid {


    display:grid;


    grid-template-columns:

    2fr 1fr 1fr;


    grid-template-rows:

    repeat(2,250px);


    gap:25px;


}





.experience-card {


    position:relative;


    border-radius:

    var(--radius-lg);


    padding:40px;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid var(--border);


    backdrop-filter:

    blur(25px);


    overflow:hidden;


    transition:

    .5s var(--transition);


}





/* Find .experience-card:hover (Around line 742) */
.experience-card:hover {
    transform: translateY(-12px);
    border-color: rgba(56, 189, 248, 0.4); /* Light Blue Border */
}





.experience-card.large {


    grid-row:

    span 2;


    display:flex;


    flex-direction:column;


    justify-content:center;


}





.experience-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: #38bdf8; /* Light Blue */
    filter: blur(120px);
    opacity: .15; /* Reduced opacity for better look on black */
    right: -100px;
    top: -100px;
}





.experience-card h2 {


    font-family:

    Space Grotesk;


    font-size:

    clamp(55px,6vw,90px);


    background:

    var(--gradient);


    -webkit-background-clip:

    text;


    -webkit-text-fill-color:

    transparent;


}





.experience-card p {


    color:

    var(--muted);


    margin-top:15px;


    font-size:16px;


    line-height:1.6;


}






/* =====================================================
   3D TILT SUPPORT
===================================================== */


.tilt {


    transform-style:

    preserve-3d;


}





.tilt > * {


    transform:

    translateZ(40px);


}






/* =====================================================
   FLOATING LIGHT DETAILS
===================================================== */


#about::before {


    content:"";


    position:absolute;


    width:500px;


    height:500px;


    left:-250px;


    top:20%;


    background:

    var(--blue);


    opacity:.15;


    filter:

    blur(150px);


}





#experience::after {


    content:"";


    position:absolute;


    width:500px;


    height:500px;


    right:-250px;


    bottom:0;


    background:

    #00d9ff;


    opacity:.12;


    filter:

    blur(160px);


}
/* =====================================================
   ANNOUNCEMENT SECTION
===================================================== */


#announcement {


    padding-top:120px;


}





.announcement-wrapper {


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:80px;


    align-items:center;


}





.announcement-left span {


    color:

    var(--sky);


    text-transform:

    uppercase;


    letter-spacing:

    5px;


    font-size:13px;


}





.announcement-left h2 {


    margin-top:25px;


    font-family:

    Space Grotesk;


    font-size:

    clamp(45px,5vw,75px);


    line-height:1;


    letter-spacing:-3px;


}





.announcement-left p {


    margin-top:30px;


    color:

    var(--muted);


    font-size:18px;


    line-height:1.8;


    max-width:600px;


}





.announcement-left .btn-primary {


    margin-top:40px;


}







/* =====================================================
   PRO REDESIGN: HIGH-VISIBILITY GLASS BOARD
===================================================== */

.announcement-right {
    display: flex;
    justify-content: center;
    perspective: 1200px;
}

.announcement-panel {
    width: 420px;
    min-height: 500px;
    padding: 45px;
    border-radius: 40px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    /* THE MATERIAL: Darker glass with high refraction */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    
    /* THE EDGE: Realistic 1mm glass highlight */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.4); 
    
    transform: rotateY(-15deg);
    transition: 0.8s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}

/* THE SHEEN: A diagonal light reflection across the glass */
.announcement-panel::after {
    content: '';
    position: absolute;
    top: -100%; left: -100%;
    width: 300%; height: 300%;
    background: linear-gradient(45deg, transparent 45%, rgba(255,255,255,0.05) 50%, transparent 55%);
    transform: rotate(-20deg);
    pointer-events: none;
    transition: 0.8s;
}

.announcement-panel:hover {
    transform: rotateY(0deg) translateY(-15px);
    border-color: #38bdf8;
}

.announcement-panel:hover::after {
    left: 100%; /* Reflection slides across on hover */
}

.panel-top {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 52px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -2px;
    line-height: 1;
    z-index: 2;
    /* Soft neon glow for the text */
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.panel-print-area {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

/* THE LOGO HALO: Soft ambient backlighting */
.panel-print-area::before {
    content: '';
    position: absolute;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 70%);
    filter: blur(30px);
    z-index: -1;
}

.printed-logo {
    width: 75%;
    height: auto;
    /* Sharpness fix for logos on glass */
    filter: brightness(1.2) drop-shadow(0 10px 20px rgba(0,0,0,0.5));
    transition: 0.5s ease;
}

.announcement-panel:hover .printed-logo {
    transform: scale(1.1);
    filter: brightness(1.4) drop-shadow(0 0 25px rgba(56, 189, 248, 0.4));
}

/* Hidden elements */
.panel-middle, .panel-bottom { display: none !important; }

/* The Pulse Dot */
.pulse {
    position: absolute;
    top: 40px; right: 40px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 20px #38bdf8;
    animation: pulseGlow 2s infinite;
    z-index: 5;
}

@keyframes pulseGlow {
    50% { opacity: 0.5; transform: scale(1.5); }
}






/* =====================================================
   EVENTS SECTION
===================================================== */


#events {


    padding-top:160px;


}





.timeline {


    position:relative;


    display:flex;


    flex-direction:column;


    gap:50px;


}





.timeline-line {


    position:absolute;


    left:35px;


    top:0;


    width:2px;


    height:100%;


    background:


    linear-gradient(

    transparent,

    var(--sky),

    transparent

    );


}






.timeline-card {


    margin-left:90px;


    display:flex;


    align-items:center;


    gap:35px;


    padding:30px;


    border-radius:

    30px;


    background:


    rgba(255,255,255,.05);


    border:

    1px solid var(--border);


    backdrop-filter:

    blur(25px);


    transition:

    .5s var(--transition);


    position:relative;


}





.timeline-card::before {


    content:"";


    position:absolute;


    left:-70px;


    width:22px;


    height:22px;


    border-radius:50%;


    background:

    var(--sky);


    box-shadow:


    0 0 30px var(--sky);


}





.timeline-card:hover {


    transform:

    translateX(20px);


    border-color:

    rgba(99,215,255,.5);


}





.timeline-card img {


    width:170px;


    height:120px;


    border-radius:

    20px;


    object-fit:cover;


}





.timeline-card h3 {


    font-family:

    Space Grotesk;


    font-size:30px;


}





.timeline-card p {


    margin-top:15px;


    color:

    var(--muted);


}







/* =====================================================
   EVENT IMAGE GLOW
===================================================== */


.timeline-card img {


    filter:

    saturate(1.2);


    transition:.5s;


}



.timeline-card:hover img {


    transform:

    scale(1.08);


}
/* =====================================================
   MEMBERSHIP SECTION
===================================================== */


#membership {


    min-height:900px;


    display:grid;


    grid-template-columns:

    1fr 1fr;


    align-items:center;


    gap:80px;


}





.membership-left span {


    color:

    var(--sky);


    letter-spacing:

    5px;


    text-transform:

    uppercase;


    font-size:13px;


}





.membership-left h2 {


    margin-top:25px;


    font-family:

    Space Grotesk;


    font-size:

    clamp(50px,5vw,85px);


    line-height:.95;


    letter-spacing:-4px;


}





.membership-left p {


    margin-top:35px;


    color:

    var(--muted);


    font-size:18px;


    line-height:1.8;


    max-width:620px;


}





.membership-buttons {


    margin-top:45px;


    display:flex;


    gap:20px;


}







/* =====================================================
   MEMBERSHIP 3D DISPLAY
===================================================== */


.membership-right {


    height:600px;


    position:relative;


    display:flex;


    justify-content:center;


    align-items:center;


    perspective:1200px;


}





.membership-showcase {


    width:500px;


    height:500px;


    position:relative;


}





.membership-image {


    position:absolute;


    inset:50px;


    border-radius:

    50px;


    overflow:hidden;


    background:


    linear-gradient(

    145deg,

    rgba(255,255,255,.15),

    rgba(255,255,255,.03)

    );


    border:

    1px solid var(--border);


    backdrop-filter:

    blur(30px);


    transform:

    rotateY(-15deg);


}





.membership-image img {


    width:100%;


    height:100%;


    object-fit:cover;


}





.floating-card {


    position:absolute;


    padding:

    20px 30px;


    border-radius:

    20px;


    background:

    rgba(255,255,255,.1);


    border:

    1px solid rgba(255,255,255,.18);


    backdrop-filter:

    blur(25px);


    z-index:5;


    font-weight:600;


    box-shadow:


    0 20px 60px rgba(0,0,0,.3);


    animation:

    floatingCard 6s infinite alternate;


}





.card-one {


    top:40px;


    left:-50px;


}





.card-two {


    right:-50px;


    top:220px;


    animation-delay:

    1s;


}





.card-three {


    bottom:40px;


    left:30px;


    animation-delay:

    2s;


}





@keyframes floatingCard {


    from {


        transform:

        translateY(0);


    }


    to {


        transform:

        translateY(-25px);


    }

}







/* =====================================================
   NEWS SECTION
===================================================== */


#news {


    padding-top:120px;


}





.news-grid {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}





.news-card {


    border-radius:

    35px;


    overflow:hidden;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid var(--border);


    backdrop-filter:

    blur(25px);


    transition:

    .6s var(--transition);


}





.news-card:hover {
    transform: translateY(-20px);
    border-color: rgba(56, 189, 248, 0.4); /* Light Blue Border */
}





.news-image {


    height:260px;


    overflow:hidden;


}





.news-image img {


    width:100%;


    height:100%;


    object-fit:cover;


    transition:

    .8s var(--transition);


}





.news-card:hover .news-image img {


    transform:

    scale(1.12);


}





.news-content {


    padding:

    35px;


}





.news-content span {


    color:

    var(--sky);


    font-size:12px;


    letter-spacing:

    3px;


    text-transform:

    uppercase;


}





.news-content h3 {


    margin-top:20px;


    font-family:

    Space Grotesk;


    font-size:28px;


    line-height:1.2;


}





.news-content p {


    margin-top:20px;


    color:

    var(--muted);


    line-height:1.7;


}





.news-content a {


    display:inline-block;


    margin-top:25px;


    color:

    var(--sky);


    font-weight:600;


    transition:.3s;


}





.news-content a:hover {


    transform:

    translateX(8px);


}
/* =====================================================
   FINAL CTA SECTION
===================================================== */


#cta {


    min-height:750px;


    display:flex;


    justify-content:center;


    align-items:center;


    text-align:center;


    position:relative;


}





.cta-background {


    position:absolute;


    inset:0;


    overflow:hidden;


}





.cta-grid {


    position:absolute;


    inset:0;


    background:


    linear-gradient(

    rgba(255,255,255,.03) 1px,

    transparent 1px

    ),

    linear-gradient(

    90deg,

    rgba(255,255,255,.03) 1px,

    transparent 1px

    );


    background-size:

    100px 100px;


    transform:

    perspective(700px)

    rotateX(70deg);


    opacity:.3;


}





.cta-glow {


    position:absolute;


    width:600px;


    height:600px;


    border-radius:50%;


    filter:

    blur(150px);


}





.glow-left {


    background:

    #0099ff;


    left:-200px;


    top:100px;


    opacity:.3;


}





.glow-right {


    background:

    #00d9ff;


    right:-200px;


    bottom:50px;


    opacity:.25;


}





.cta-content {


    position:relative;


    z-index:2;


    max-width:900px;


}





.cta-content span {


    color:

    var(--sky);


    letter-spacing:

    6px;


    font-size:13px;


}





.cta-content h2 {


    margin-top:30px;


    font-family:

    Space Grotesk;


    font-size:

    clamp(60px,8vw,110px);


    line-height:.95;


    letter-spacing:-5px;


    background:

    linear-gradient(

    white,

    #8fd8ff

    );


    -webkit-background-clip:

    text;


    -webkit-text-fill-color:

    transparent;


}





.cta-content p {


    margin:35px auto;


    max-width:650px;


    color:

    var(--muted);


    font-size:18px;


    line-height:1.8;


}





.cta-buttons {


    display:flex;


    justify-content:center;


    gap:20px;


}








/* =====================================================
   FOOTER
===================================================== */


footer {


    position:relative;


    padding:

    90px 8% 30px;


    background:

    rgba(0,0,0,.25);


    border-top:

    1px solid var(--border);


    overflow:hidden;


}





.footer-bg {


    position:absolute;


    width:700px;


    height:300px;


    left:50%;


    top:-200px;


    transform:

    translateX(-50%);


    background:

    var(--blue);


    filter:

    blur(180px);


    opacity:.2;


}





.footer-container {


    position:relative;


    display:grid;


    grid-template-columns:

    1.3fr 2fr;


    gap:80px;


}





.footer-brand h3 {


    margin-top:25px;


    font-family:

    Space Grotesk;


    font-size:25px;


}





.footer-brand p {


    margin-top:20px;


    color:

    var(--muted);


    line-height:1.8;


    max-width:350px;


}





.footer-brand img {


    width:70px;


}





.footer-links {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}





.footer-links h4 {


    font-family:

    Space Grotesk;


    margin-bottom:25px;


    font-size:18px;


}





.footer-links a {


    display:block;


    margin-bottom:15px;


    color:

    var(--muted);


    transition:.3s;


}





.footer-links a:hover {


    color:

    var(--sky);


    transform:

    translateX(8px);


}







.footer-bottom {


    margin-top:70px;


}





.footer-line {


    width:100%;


    height:1px;


    background:

    var(--border);


}





.footer-copy {


    padding-top:25px;


    display:flex;


    justify-content:space-between;


    color:

    var(--muted);


    font-size:14px;


}








/* =====================================================
   GLOBAL GLASS EFFECTS
===================================================== */


.glass {


    background:

    rgba(255,255,255,.06);


    border:

    1px solid var(--border);


    backdrop-filter:

    blur(25px);


}








/* =====================================================
   PAGE REVEAL HELPERS
===================================================== */


.reveal {


    opacity:0;


    transform:

    translateY(50px);


    transition:

    1s var(--transition);


}





.reveal.active {


    opacity:1;


    transform:

    translateY(0);


}







/* =====================================================
   SELECTION
===================================================== */


::selection {


    background:

    var(--blue);


    color:white;


}







/* =====================================================
   SCROLLBAR
===================================================== */


::-webkit-scrollbar {


    width:10px;


}



::-webkit-scrollbar-track {


    background:

    #05070b;


}



::-webkit-scrollbar-thumb {


    background:

    linear-gradient(

    var(--blue),

    var(--sky)

    );


    border-radius:20px;


}

/* =====================================================
   MOBILE OPTIMIZATION (Max-width: 768px)
===================================================== */

@media (max-width: 768px) {
    
    /* 1. CENTER LOGO ON MOBILE */
    .top-logo-bar {
        justify-content: center; /* Centers logo */
        height: 120px;
        padding: 0;
    }

    .logo-holder {
        margin-left: 0; /* Remove PC 5% margin */
        padding: 10px 25px;
    }

    .line-segment {
        display: none; /* Lines look cluttered on mobile */
    }

    /* 2. MOBILE NAVBAR - Slimmer and centered */
    #main-nav-container {
        width: 95%;
        top: 130px;
    }

    .navbar-pill {
        padding: 10px 15px;
        justify-content: center;
        gap: 15px;
    }

    .nav-menu {
        gap: 12px;
    }

    .nav-menu a {
        font-size: 9px; /* Smaller font for mobile fit */
        letter-spacing: 1px;
    }

    /* 3. HERO SECTION - Stacked Layout */
    #hero {
        flex-direction: column;
        text-align: center;
        padding: 200px 5% 60px;
        justify-content: flex-start;
    }

    .hero-content {
        width: 100%;
        z-index: 10;
    }

    .hero-content h1 {
        font-size: clamp(40px, 12vw, 60px);
        letter-spacing: -2px;
    }

    .hero-buttons {
        justify-content: center;
    }

    /* 4. SHRINK 3D ELEMENTS - So they don't block text */
    .hero-aircraft {
        position: relative;
        width: 280px;
        right: auto;
        top: 20px;
        margin: 0 auto;
        animation: aircraftFloatMobile 6s ease-in-out infinite;
    }

    .hero-rings, .hero-blueprint, .hero-light {
        display: none; /* Hiding heavy elements to improve mobile performance */
    }

    /* 5. FIX GRIDS (About, Experience, News, Membership) */
    .about-grid, 
    .experience-grid, 
    .news-grid, 
    #membership,
    .announcement-wrapper {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .experience-card.large {
        grid-column: span 1;
    }

    .section-header h2 {
        font-size: 35px;
    }

    /* 6. ANNOUNCEMENT PANEL SCALING */
    .announcement-panel {
        width: 100%;
        min-height: auto;
        padding: 30px;
        transform: rotateY(0); /* Remove tilt on mobile for better touch */
    }

    .panel-top {
        font-size: 35px;
    }

    /* 7. TIMELINE/EVENTS */
    .timeline-card {
        margin-left: 40px;
        flex-direction: column;
        align-items: flex-start;
    }

    .timeline-card img {
        width: 100%;
        height: 180px;
    }

    .timeline-line {
        left: 15px;
    }

    .timeline-card::before {
        left: -35px;
    }
}

/* =====================================================
   MOBILE KEYFRAMES
===================================================== */

@keyframes aircraftFloatMobile {
    0%, 100% { transform: translateY(0) rotate(2deg); }
    50% { transform: translateY(-15px) rotate(-2deg); }
}

/* Page Reveal for Mobile */
.reveal-mobile {
    animation: fadeUp 1s ease forwards;
}
/* =====================================================
   MOBILE FOOTER OPTIMIZATION
===================================================== */

@media (max-width: 768px) {
    footer {
        padding: 60px 5% 30px;
        text-align: center;
    }

    .footer-container {
        display: flex;
        flex-direction: column; /* Stack everything vertically */
        gap: 50px;
        align-items: center;
    }

    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 100%;
    }

    .footer-brand img {
        width: 60px; /* Scaled for mobile */
        margin-bottom: 20px;
    }

    .footer-brand h3 {
        font-size: 20px;
        line-height: 1.3;
        margin-top: 0;
    }

    .footer-brand p {
        margin: 15px auto 0;
        font-size: 14px;
        max-width: 280px;
    }

    /* Links Layout */
    .footer-links {
        display: grid;
        grid-template-columns: 1fr; /* Stack categories */
        gap: 40px;
        width: 100%;
    }

    .footer-links h4 {
        margin-bottom: 15px;
        font-size: 16px;
        color: #fff;
        position: relative;
        display: inline-block;
    }

    /* Add a small blue underline to headers for mobile hierarchy */
    .footer-links h4::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 25%;
        right: 25%;
        height: 2px;
        background: var(--blue);
    }

    .footer-links a {
        display: block;
        padding: 8px 0;
        font-size: 15px;
        margin-bottom: 5px;
    }

    .footer-links a:hover {
        transform: none; /* Disable horizontal slide on mobile */
        color: var(--blue);
    }

    /* Bottom Bar */
    .footer-bottom {
        margin-top: 50px;
    }

    .footer-copy {
        flex-direction: column; /* Stack Copyright and "Designed by" */
        gap: 15px;
        font-size: 12px;
    }
}
@media (max-width: 768px) {
    /* 1. GIVE HERO ROOM TO BREATHE */
    #hero {
        padding: 160px 5% 80px;
        height: auto;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    /* 2. BENTO STATS LAYOUT (Prevents "Frowning") */
    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        width: 100%;
        margin-top: 40px;
        margin-bottom: 60px; /* Space for the scroll indicator */
    }

    .hero-stats div {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(15px);
        padding: 20px 10px;
        border-radius: 18px;
        text-align: center;
        min-width: 0;
    }

    /* Make the first one (Years) span across for better balance */
    .hero-stats div:first-child {
        grid-column: span 2;
    }

    .hero-stats h2 {
        font-size: 30px !important;
        background: var(--gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 5px;
    }

    .hero-stats p {
        font-size: 10px !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--muted);
    }

    /* 3. FIX SCROLL INDICATOR OVERLAP & ANIMATION */
    /* =====================================================
       ENHANCED MOBILE SCROLL INDICATOR
    ===================================================== */
    .scroll-indicator {
        position: relative;
        margin-top: 60px; /* Space from the stats */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding-bottom: 50px;
        width: 100%;
        opacity: 0.8;
    }

    .scroll-indicator span {
        width: 2px;             /* Thicker line */
        height: 100px;          /* Much longer line (2x the previous size) */
        background: linear-gradient(to bottom, 
            transparent, 
            #38bdf8,            /* Your light blue */
            transparent
        );
        /* Added glow so it's impossible to miss */
        box-shadow: 0 0 15px rgba(56, 189, 248, 0.5); 
        border-radius: 2px;
        animation: scrollLineUltra 2.5s infinite cubic-bezier(.22,1,.36,1);
    }

    .scroll-indicator {
        font-size: 11px;
        letter-spacing: 5px;
        color: #38bdf8;          /* Changed text to blue to pop more */
        font-weight: 700;
    }
}

/* 4. THE ANIMATION (Ensure this is outside the media query) */
@keyframes scrollLineUltra {
    0% { 
        transform: scaleY(0); 
        transform-origin: top; 
        opacity: 0; 
    }
    30% { 
        transform: scaleY(1); 
        transform-origin: top; 
        opacity: 1; 
    }
    70% { 
        transform: scaleY(1); 
        transform-origin: bottom; 
        opacity: 1; 
    }
    100% { 
        transform: scaleY(0); 
        transform-origin: bottom; 
        opacity: 0; 
    }
}
/* =====================================================
   MOBILE ANNOUNCEMENT FIX
===================================================== */

@media (max-width: 768px) {
    #announcement {
        padding: 80px 5%;
    }

    .announcement-wrapper {
        display: flex;
        flex-direction: column; /* Stack text above the board */
        gap: 50px;
        text-align: center;
    }

    .announcement-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .announcement-left h2 {
        font-size: 36px; /* Smaller title for mobile */
        margin-top: 15px;
    }

    /* THE GLASS BOARD MOBILE REDESIGN */
    .announcement-right {
        perspective: none; /* Remove 3D depth for mobile stability */
    }

    .announcement-panel {
        width: 100% !important;
        max-width: 350px;      /* Prevents it from being too wide */
        min-height: 280px !important; /* Shorter, cleaner height for mobile */
        margin: 0 auto;
        transform: rotateY(0) !important; /* Flatten the tilt */
        padding: 30px;
        border-radius: 30px;
    }

    .panel-print-area::before {
        width: 150px;
        height: 150px; /* Smaller halo for mobile */
    }

    .printed-logo {
        width: 70% !important; /* Logo fits better in the smaller card */
    }

    .pulse {
        top: 20px;
        right: 20px; /* Move dot closer to corner */
    }

    .announcement-left .btn-primary {
        width: 100%; /* Full width button for mobile thumbs */
        max-width: 280px;
        margin-top: 30px;
    }
}
/* =====================================================
   UNIFIED RESPONSIVE VIEW (All Tablets & Mobiles)
   Forces the clean, stacked layout for anything under 1150px
===================================================== */

@media (max-width: 1150px) {
    
    /* 1. CENTER LOGO HEADER */
    .top-logo-bar {
        justify-content: center !important;
        height: 120px !important;
        background: transparent !important;
    }
    .logo-holder { margin-left: 0 !important; }
    .line-segment { display: none !important; }

    /* 2. STACKED HERO SECTION - UPDATED FOR CENTERING */
    #hero {
        flex-direction: column !important;
        text-align: center !important;
        padding: 180px 5% 60px !important;
        justify-content: flex-start !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    .hero-content {
        width: 100% !important;
        margin-bottom: 40px !important;
        display: flex;
        flex-direction: column;
        align-items: center; /* Forces children to center */
    }

    .hero-content h1 {
        font-size: clamp(40px, 10vw, 75px) !important;
        letter-spacing: -2px !important;
        width: 100%;
    }

    .hero-content p {
        margin-left: auto !important;  /* CRITICAL: Centers the box */
        margin-right: auto !important; /* CRITICAL: Centers the box */
        max-width: 550px !important;    /* Keeps text readable on tablet */
        text-align: center !important;
    }

    .hero-buttons {
        justify-content: center !important;
        gap: 15px !important;
        width: 100%;
    }

    /* 3. CENTERED AIRCRAFT BELOW TEXT */
    .hero-aircraft {
        position: relative !important;
        width: 80% !important; /* Larger on tablet, smaller on phone */
        max-width: 500px !important;
        right: auto !important;
        top: 20px !important;
        margin: 0 auto !important;
        display: block !important;
        transform: none !important;
    }

    .hero-rings {
        display: none !important; /* Keeps layout clean and fast */
    }

    /* 4. CENTERED STATS BOXES */
    .hero-stats {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
        margin-top: 50px !important;
    }

    .hero-stats div {
        min-width: 120px !important;
        padding: 20px 15px !important;
    }

    /* 5. STACKED ANNOUNCEMENT */
    .announcement-wrapper {
        flex-direction: column !important;
        text-align: center !important;
        gap: 40px !important;
    }

    .announcement-left { width: 100% !important; }

    .announcement-panel {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        transform: none !important; /* Flatten 3D tilt for mobile/tablet */
    }

    /* 6. CENTERED FOOTER */
    .footer-container {
        flex-direction: column !important;
        text-align: center !important;
        gap: 40px !important;
    }
}
/* =====================================================
   IPAD AIR OPTIMIZATION (820px x 1180px)
===================================================== */

@media (min-width: 769px) and (max-width: 900px) {
    
    /* 1. HERO - Prevent Aircraft/Text Overlap */
    #hero {
        padding: 180px 5% 60px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .hero-content {
        width: 55% !important; /* Locks text to the left */
        z-index: 5;
    }

    .hero-content h1 {
        font-size: 58px !important; /* Scale down title for 820px */
        line-height: 1.1;
    }

    .hero-aircraft {
        position: absolute !important;
        width: 400px !important; /* Smaller aircraft to fit 820px width */
        right: -5% !important;   /* Push slightly off edge to clear text */
        top: 45% !important;
        display: block !important;
    }

    /* 2. STATS - Compact Horizontal Row */
    .hero-stats {
        margin-top: 40px !important;
        gap: 10px !important;
    }

    .hero-stats div {
        min-width: 95px !important;
        padding: 15px 8px !important;
    }

    .hero-stats h2 { font-size: 26px !important; }

    /* 3. ANNOUNCEMENT - Prevent Squashing */
    .announcement-wrapper {
        display: flex !important;
        flex-direction: column !important; /* Stacked is safer for 820px width */
        text-align: center;
        gap: 50px;
    }

    .announcement-left { width: 100% !important; }

    .announcement-panel {
        width: 100% !important;
        max-width: 380px !important; /* Perfectly sized for iPad Air */
        min-height: 300px !important;
        margin: 0 auto;
        transform: none !important; /* Flatten 3D for better touch */
    }

    /* 4. EXPERIENCE GRID */
    .experience-grid {
        grid-template-columns: 1fr 1fr !important; /* 2 columns instead of 3 */
        gap: 20px;
    }
}